<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="./css/myself.css">
    <link rel="icon" type="image/x-icon" href="./images/logo.png" />
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/bootstrapcss.css">
    <link rel="stylesheet" href="./css/bootstrap.css">


</head>

<body link="#9933ff">
    <div class="all">
        <strong>个人中心</strong>
        <div class="top">
            <!-- 把图片设置成圆形 -->
            <div class="yuan"><img src="./images/捕获4.PNG"></div>
            <!-- 用下拉式菜单切换账号 -->
            <div id="change">
                <button class="btn btn-default " data-toggle="dropdown" type="button" style="width: 80px;height:40px">切换账号</button>
                <ul>
                    <li><a href="#">账号1</a></li>
                    <br>
                    <li><a href="#">账号2</a></li>
                    <br>
                    <li><a href="#">账号3</a></li>
                </ul>
            </div>

            <br>
            <!-- 昵称加粗 -->
            <p> 昵称：<strong>小甜甜</strong></p>




        </div>
        <div>
            <div class="body">
                <!-- 链接，点击可跳转.并把字体颜色改成 -->
                <a href="./Collection.html" style="color: brown "><img src="./images/礼物.png"> 我的收藏 </a>
                <hr>
                <a href="./Collection.html" style="color: brown"><img src="./images/圣诞屋.png"> 浏览历史 </a>
                <hr>
                <a href="./call.html" style="color: brown"><img src="./images/驯鹿.png"> 联系客服 </a>
                <hr>
                <a href="./index.html" style="color: brown"><img src="./images/手套.png"> 回到首页 </a>
                <hr>
                <div class="back">
                    <!-- 设置退出按钮 -->
                    <input type="reset" name="退出" value="退出登录" style="width: 80px;height:40px">
                </div>

            </div>

        </div>

    </div>
</body>
<script>
    //将下拉式菜单设置悬停可以出ul的功能和不在上面是隐藏的功能
    var change = document.getElementById("change");
    var oul = document.getElementsByTagName("ul")[0];
    change.onmouseover = function() {
        oul.style.display = "block";
    }
    change.onmouseout = function() {
        oul.style.display = "none";
    }
</script>

</html>